<template>
   <img src="https://img10.360buyimg.com/imagetools/jfs/t1/329335/20/26621/12315/68fb38b2F397858cb/60150591e0ec3411.png"
   alt="">
   <van-card num="1" :price="price" :desc="desc" :title="title">
                <template #tags>
                    <van-tag plain type="primary" color="pink">{{ category }}</van-tag>
                    <van-tag plain type="primary" color="pink">{{ brand }}</van-tag>
                </template>
                <template #footer>
                    <div style="display:flex; gap:8px; align-items:center;">
                        <van-button size="mini">分享</van-button>
                        <van-button size="mini">收藏</van-button>
                        <van-button size="mini">加入购物车</van-button>
                    </div>
                </template>
            </van-card>
            <van-cell-group>
                <van-cell center title="优惠" value="开通PLUS,购买立享2件赠品" class="custom-cell" />
                <van-cell center title="送至" value="北京朝阳区三环到四环之间" class="custom-cell" />
                <van-cell center title="运费" value="包邮（请以提交订单时为准）" class="custom-cell" />
            </van-cell-group>
            <!-- <van-coupon-cell
  :coupons="coupons"
  :chosen-coupon="chosenCoupon"
  @click="showList = true"
/> -->
<!-- 优惠券列表 -->
<!-- <van-popup
  v-model:show="showList"
  round
  position="bottom"
  style="height: 90%; padding-top: 4px;"
>
  <van-coupon-list
    :coupons="coupons"
    :chosen-coupon="chosenCoupon"
    :disabled-coupons="disabledCoupons"
    @change="onChange"
    @exchange="onExchange"
  />
</van-popup> -->
            <!-- <van-address-edit
  :area-list="areaList"
  show-delete
  show-set-default
  show-search-result
  :search-result="searchResult"
  :area-columns-placeholder="['请选择', '请选择', '请选择']"
  @save="onSave"
  @delete="onDelete"
  @change-detail="onChangeDetail"
/> -->
</template>

<script>
    export default {
        props:['price','title','desc','category','brand'],
        data(){
            return{
                // coupons:'',
                // chosenCoupon:'',
                // disabledCoupons:'',
                // showList:[]
            }

        },
        methods:{
            // onSave(){

            // },
            // onDelete(){

            // },
            // onChangeDetail(){

            // }
        }
    }
</script>

<style lang="less" scoped>
.custom-cell {
    --van-cell-font-size: 13px;
    /* 这里改成你想要的字体大小 */
}
.van-cell {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
}
.custom-cell .van-cell__title,
.custom-cell .van-cell__value {
    display: flex;
    /* 让内容成为 flex 容器 */
    align-items: center;
    /* 垂直方向居中 */
}
.custom-cell .van-cell__value {
    justify-content: flex-end;
    /* 右对齐 */
    text-align: right;
    white-space: normal;
    /* 多行时可换行 */
    color: #666;
}
img {
        width: 100%;
        max-width: 375px;
        height: auto;
        display: block;
    }
</style>